<!documentTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="refresh" content="5">
		<title>实时监控</title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">实时监控</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h5>实时监控</h5>
				<div class="mui-content-padded">
					<div class="chart" id="xueyaChart"></div>
				</div>
				<div class="mui-content-padded">
					<div class="chart" id="xinlvChart"></div>
				</div>
				<div class="mui-content-padded">
					<div class="chart" id="maiboChart"></div>
				</div>
				<div class="mui-content-padded">
					<div class="chart" id="tiwenChart"></div>
				</div>
			</div>
			<div style="height:44px;"></div>
		</div>
		
		<script>
			mui.init();
			var userName = localStorage.getItem('userName');
			var url = localStorage.getItem('remoteAddress') + '/api/realtimeQuery';
			//alert(queryUserName+pickTimeStart+pickTimeEnd);
			mui.get(url,{
				userName: userName
				},function(data){
					var data = data.data;
					//alert(data.timeStep[0]);
					localStorage.setItem('queryUserTimestep',JSON.stringify(data.timeStep));
					localStorage.setItem('queryUserXueya',JSON.stringify(data.xueya));
					localStorage.setItem('queryUserXinlv',JSON.stringify(data.xinlv));
					localStorage.setItem('queryUserMaibo',JSON.stringify(data.maibo));
					localStorage.setItem('queryUserTiwen',JSON.stringify(data.tiwen));
					//var tmp = new Array();
					//tmp = JSON.parse(localStorage.getItem('queryUserTimestep'));
					//alert(tmp[0]);
					var queryUserTimestep = new Array();
					var queryUserXueya = new Array();
					var queryUserXueya1 = new Array();
					var queryUserXueya2 = new Array();
					var queryUserXinlv = new Array();
					var queryUserMaibo = new Array();
					var queryUserTiwen = new Array();
					queryUserTimestep = JSON.parse(localStorage.getItem('queryUserTimestep'));
					//alert(queryUserTimestep[0]);
					queryUserXueya = JSON.parse(localStorage.getItem('queryUserXueya'));
					for(var i = 0, len = queryUserXueya.length; i < len; i++){
						var tmp = new Array();
						tmp = queryUserXueya[i].split("/");
						queryUserXueya1[i] = tmp[1];
						queryUserXueya2[i] = tmp[0];
					}
					queryUserXinlv = JSON.parse(localStorage.getItem('queryUserXinlv'));
					queryUserMaibo = JSON.parse(localStorage.getItem('queryUserMaibo'));
					queryUserTiwen = JSON.parse(localStorage.getItem('queryUserTiwen'));
					var chartOption = new Array();
					chartOption[0] = {
						title: {
							text: '血压变化',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data:['收缩压','舒张压']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: queryUserTimestep
						},
						yAxis: {
							type: 'value',
							min: 40
						},
						series: [
							{
								name:'收缩压',
								type:'line',
								itemStyle: {
									color: '#c23531'
								},
								markLine: {
									data: [
										{
											name: '正常最高收缩压',
											yAxis: 139
										},
										{
											name: '正常最低收缩压',
											yAxis: 90
										}
									]
								},
								data:queryUserXueya1
							},
							{
								name:'舒张压',
								type:'line',
								itemStyle: {
									color: '#91c7ae'
								},
								markLine: {
									data: [
										{
											name: '正常最高舒张压',
											yAxis: 89
										},
										{
											name: '正常最低舒张压',
											yAxis: 60
										}
									]
								},
								data:queryUserXueya2
							}
						]
					};
					chartOption[1] = {
						title: {
							text: '心率变化',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data:['心率']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: queryUserTimestep
						},
						yAxis: {
							type: 'value',
							min: 40
						},
						series: [
							{
								name:'心率',
								type:'line',
								itemStyle: {
									color: '#2f4554'
								},
								markLine: {
									data: [
										{
											name: '正常最高心率',
											yAxis: 100
										},
										{
											name: '正常最低心率',
											yAxis: 60
										}
									]
								},
								data:queryUserXinlv
							}
						]
					};
					chartOption[2] = {
						title: {
							text: '脉搏变化',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data:['脉搏']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: queryUserTimestep
						},
						yAxis: {
							type: 'value',
							min: 40
						},
						series: [
							{
								name:'脉搏',
								type:'line',
								itemStyle: {
									color: '#61a0a8'
								},
								markLine: {
									data: [
										{
											name: '正常最高脉搏',
											yAxis: 100
										},
										{
											name: '正常最低脉搏',
											yAxis: 60
										}
									]
								},
								data:queryUserMaibo
							}
						]
					};
					chartOption[3] = {
						title: {
							text: '体温变化',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data:['体温']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: queryUserTimestep
						},
						yAxis: {
							type: 'value',
							min: 34,
							axisLabel: {
								formatter: '{value} °C'
							}
						},
						series: [
							{
								name:'体温',
								type:'line',
								itemStyle: {
									color: '#d48265'
								},
								markLine: {
									data: [
										{
											name: '正常最高体温',
											yAxis: 37
										},
										{
											name: '正常最低体温',
											yAxis: 35.9
										}
									]
								},
								data:queryUserTiwen
							}
						]
					};
					echarts.init(document.getElementById('xueyaChart')).setOption(chartOption[0]);
					echarts.init(document.getElementById('xinlvChart')).setOption(chartOption[1]);
					echarts.init(document.getElementById('maiboChart')).setOption(chartOption[2]);
					echarts.init(document.getElementById('tiwenChart')).setOption(chartOption[3]);
				},'json'
			);
		</script>
	</body>
</html>
